<!--
 * @copyright: Huang Ding
 * @Author: ding-cx
 * @Date: 2021-03-01 13:53:30
 * @LastEditors: ding-cx
 * @LastEditTime: 2021-03-01 14:18:56
 * @Description: file content
-->
<template>
  <el-cascader
    ref="casRef"
    v-model="selectedMenu"
    :options="treeData.tree"
    @change="selectPartmentChange"
    placeholder="请选择菜单"
    :size="size"
    clearable
    class="width-all"
    :props="{
      value: 'route_id',
      label: 'title',
      children: 'children',
      checkStrictly: true,
      expandTrigger: 'hover',
    }"
  ></el-cascader>
</template>
<script>
import { ref, reactive, computed } from "@vue/composition-api";

import svs_sys_menus from "@/service/sys/menus"

let root;

/* 提供接口方法。参数是级联菜单ref */
function useInterface(casRef) {
  const getCheckedNodes = () => {
    return casRef.value.getCheckedNodes();
  };
  return {
    getCheckedNodes,
  };
}

/* 级联菜单功能 */
function useJilian(setups) {
  const change = (val) => {
    setups.ctx.emit("change", val);
  };

  const selectedMenu = computed({
    get() {
      return setups.props.value;
    },
    set(val) {
      setups.ctx.emit("input", val);
    },
  });

  return {
    selectedMenu,
    selectPartmentChange: change,
  };
}

function useEnter(props, ctx) {
  root = ctx.root;
  const setups = {
    props,
    ctx,
    root,
  };
  const casRef = ref(null);

  const jilians = useJilian(setups);

  const treeData = reactive({
    tree:[]
  })

  svs_sys_menus.getRouteMenuTree().then(res => {
    console.log(res);
    treeData.tree = res;
  })

  const interfacess = useInterface(casRef);
  return {
    casRef,
    treeData,
    ...jilians,
    ...interfacess,
  };
}
export default {
  name: "menu-select",
  components: {},
  props: {
    value: {
      type: [Array],
      required: true,
      default() {
        return [];
      },
    },
    size: {
      type: String,
    },
  },
  setup(props, ctx) {
    return useEnter(props, ctx);
  },
};
</script>
<style scoped>
</style>